inline-block で隙間ができる問題

メニューとかで display:inline-block で横並びにするやつよくやる。

でも隙間ができてしまう。

a 要素入れたり装飾つけたりすると気になる隙間…

解決方法

code:sample.html

<ul>

<li>横並びにしたいアイテム</li>

<li>横並びにしたいアイテム</li>

<li>横並びにしたいアイテム</li>

<li>横並びにしたいアイテム</li>

</ul>

code:sample.css

ul {

font-size: 0;

}

li {

display: inline-block;

font-size: 16px;

}

表示

https://gyazo.com/5e67c39ecf1ed1e9075e290d6c77d52b

解決のヒント（ありがたや〜